<!--
 * @Author: njz
 * @FileDescription: 36大中城市价排名
-->
<template>
  <div class="dzcs">
    <com-box :title="title" class="com-box-title">
      <template #titleRight>
        <slot name="titleRight" />
      </template>
      <template v-slot>
        <loading v-show="loading" />
        <div class="jgdb-box">
          <div v-if="showMsg !== ''" class="jgdb-msg">
            {{ showMsg }}
          </div>
          <div v-if="showMsg === ''" class="jgdb-til">
            <span class="til-jg">
              <span v-if="topData.exeno">期号 : {{ topData.exeno }}</span>
              <span>
                {{ topData.areaName }} : {{ topData.price }}{{ topData.unit }}
              </span>
            </span>
            <span class="til-sort"> {{ topData.sort }}名 </span>
            <span class="til-avg"> 平均 : {{ topData.avg }} </span>
            <span class="til-top">
              <span>最高 : {{ topData.max }}</span>
              <span>最低 : {{ topData.min }}</span>
            </span>
          </div>
          <div v-if="showMsg === ''" class="jgdb-btm">
            <charts :params="params"></charts>
          </div>
        </div>
      </template>
    </com-box>
  </div>
</template>
<script lang="ts">
import { defineComponent, reactive, toRefs, watch } from 'vue'
import httpRequest from '@/service'
import loading from '@/charts/loading.vue'
import { gradientColor } from '@/charts/utils'
import comBox from '@/components/comBox/comBox.vue'
interface IState {
  title: string
  topData: any
  showMsg: string
  params: any
  loading: boolean
  getData: (goodsId: string) => void
}
export default defineComponent({
  name: 'r36dzcsjgdb',
  components: {
    comBox,
    loading
  },
  props: {
    goodsId: {
      type: String,
      default: '650000'
    },
    goodsName: {
      type: String,
      default: '新疆'
    },
    zlbgoodsIds: {
      type: String,
      default: ''
    }
  },
  setup(props) {
    let lessMx = 1.9
    const state: IState = reactive({
      title: '-',
      topData: {},
      showMsg: '',
      loading: false,
      params: {
        loading: true,
        map: {
          value: '数量'
        },
        options: {
          dataset: {
            dimensions: ['name', 'value'],
            source: []
          },
          grid: {
            left: '-3%',
            top: '18',
            bottom: '2'
          },
          legend: {
            show: false
          },
          xAxis: [
            {
              type: 'category',
              interval: 0,
              axisLabel: {
                fontSize: 14 * lessMx + 'px',
                formatter: function (value: any) {
                  if (value.length <= 2) {
                    return value
                  } else {
                    const arr = value.split('')
                    let test = ''
                    arr.forEach((item: any, index: any) => {
                      if (index === 1) {
                        test += item + '\n'
                      } else {
                        test += item
                      }
                    })
                    return test
                  }
                }
              }
            }
          ],
          yAxis: [
            {
              show: false
            }
          ],
          series: [
            {
              type: 'bar',
              barWidth: 15 * lessMx,
              markLine: {
                //平均值
                symbol: 'none',
                label: {
                  show: false
                },
                data: [
                  {
                    name: '平均值',
                    type: 'average',
                    yAxis: 100
                  }
                ],
                //平均线设置
                lineStyle: {
                  //设置该线样式
                  type: 'dashed',
                  color: '#EB6F06'
                }
              }
            }
          ]
        }
      },
      getData: (goodsId) => {
        state.loading = true
        httpRequest
          .get({
            url: 'M2P136zdcs',
            params: { goodsId: goodsId, goodsName: props.goodsName }
          })
          .then((res) => {
            state.title = res.title ? res.title : '-'
            state.showMsg = ''
            if (res.showMessage && String(res.showMessage).length > 0) {
              state.showMsg = res.showMessage
            } else {
              state.params.loading = true
              const arrValue = res.data.map((i: any) => i.value)
              state.topData.max = Math.max.apply(null, arrValue) //最大值
              state.topData.min = Math.min.apply(null, arrValue) //最小值
              state.topData.areaName = res.areaName //高量项
              state.topData.unit = res.unit //单位
              state.topData.exeno = res.exeno //期号
              //平均值
              state.topData.avg = (
                eval(arrValue.join('+')) / arrValue.length
              ).toFixed(1)

              state.params.options.series[0].markLine.data[0].yAxis =
                state.topData.avg

              const resData = JSON.parse(JSON.stringify(res.data))

              // 获取高亮项的参数
              resData.sort((a: any, b: any) => b.value - a.value)
              resData.some((item: any, index: number) => {
                if (item.name === res.areaName) {
                  state.topData.price = item.value
                  state.topData.sort = index + 1
                  return true
                }
              })
              state.params.options.series[0].itemStyle = {
                color: (item: any) => {
                  if (item.name === res.areaName) {
                    return gradientColor(['#efde1f', '#ea690a'])
                  } else {
                    return gradientColor(['#0b3ee3', '#0aeadd'])
                  }
                }
              }
              state.params.options.series[0].label = {
                show: true,
                color: '#efdd1f',
                position: 'top',
                fontSize: 18 * lessMx + 'px',
                formatter: (item: any) => {
                  if (item.name === res.areaName) {
                    return item.data.value
                  } else {
                    return ''
                  }
                }
              }
              state.params.options.dataset.source = res.data

              setTimeout(() => {
                state.params.loading = false
              })
            }
            state.loading = false
          })
          .catch(() => {
            state.loading = false
            console.log('请求失败')
          })
      }
    })
    watch(
      () => props.goodsId,
      (newVal) => {
        state.getData(newVal)
      },
      {
        immediate: true
      }
    )
    watch(
      () => props.zlbgoodsIds,
      (val) => {
        if (val.indexOf(',') > -1) {
          state.getData(val.split(',')[0])
        } else {
          state.getData(val)
        }
      }
    )
    return {
      ...toRefs(state)
    }
  }
})
</script>
<style lang="less" scoped>
@MX: 1.9; // 放大倍数
.dzcs {
  width: 520px * @MX;
  height: 350px * @MX;
}
.dzcs .com-box-title {
  ::v-deep(.com-header) {
    height: 45px * @MX;
  }
  ::v-deep(.title) {
    font-size: 20px * @MX;
    line-height: 45px * @MX;
    background-size: 264px * @MX 45px * @MX;
    flex: 0 0 264px * @MX;
  }
}
.jgdb-box {
  padding: 0px 10px * @MX;
  width: 100%;
  height: calc(100% - 15px * @MX);
  .jgdb-msg {
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 31px * @MX;
    font-weight: bold;
    color: #ef7809;
  }
  .jgdb-til {
    // margin: 7px 5px;
    margin: 20px * @MX 5px * @MX;
    padding: 6px * @MX 0px;
    // background-color: rgba(15, 64, 144, 0.5);
    background-color: #0f408d;
    font-size: 14px * @MX;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-around;
    font-weight: bold;
    .til-jg {
      color: #9efffd;
      span {
        display: block;
      }
    }
    .til-sort {
      color: #9efffd;
    }
    .til-avg {
      color: #ffee2d;
    }
    .til-top {
      color: #09fff6;
      span {
        display: block;
      }
      span:nth-child(1) {
        // color: #f15e09;
        color: rgb(255, 38, 38);
      }
      span:nth-child(2) {
        // color: #03f0b2;
        color: rgb(66, 255, 0);
      }
    }
  }
  .jgdb-btm {
    // height: 102px;
    height: 165px * @MX;
    display: flex;
    align-items: flex-end;
    img {
      width: 10px * @MX;
      height: 15px * @MX;
      cursor: pointer;
      position: relative;
      bottom: 15px * @MX;
    }
  }
}
</style>
